<template>
  <div>
    <div class="content" style="width: 800px">
      <dl class="company_center_content">
        <dt>
          <h1>
            <em></em>
            隶属公司|
            <a @click="goCompanyDetail()">查看</a>
          </h1>

        </dt>
        <dd>
          <div class="ccc_tr">招聘就在 <span>易小聘~</span></div>

          <el-form id="jobForm" label-width="100px" class="demo-ruleForm"
                   :model="Company" style="margin-left: 0px"
          >
            <table class="btm" v-loading="loading">
              <el-row>
                <el-col :span="14">
                  <el-form-item label="公司名称" prop="resource">
                    <el-input v-model="Company.companyName" placeholder="如“XXX有限公司”" style="width: 350px"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="10">
                  <el-form-item label="创始人" prop="resource">
                    <el-input v-model="Company.chairman" placeholder="" style="width: 160px"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="公司规模" prop="resource">
                    <el-select v-model="Company.size" placeholder="请选择">
                      <el-option label="0-20" value="0-20"></el-option>
                      <el-option label="20-50" value="20-50"></el-option>
                      <el-option label="50-100" value="50-100"></el-option>
                      <el-option label="100-500" value="100-500"></el-option>
                      <el-option label="500以上" value="500以上"></el-option>
                    </el-select>
                    人
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="注册时间" prop="resource">
                    <el-date-picker
                            v-model="Company.zctime"
                            type="date"
                            placeholder="选择日期"
                    >
                    </el-date-picker>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="10">
                  <el-form-item label="公司业务" prop="resource">
                    <span >{{this.Company.business}}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="14">
                  <jobClassify v-on:job="getJobClick"></jobClassify>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="14">
                  <el-form-item label="地点/市" prop="resource">
                    <el-input v-model="Company.address" placeholder="" style="width: 200px"></el-input>
                  </el-form-item>
                  <el-form-item label="公司企业文化" prop="resource">
                    <el-input
                            type="textarea"
                            :autosize="{ minRows: 3, maxRows: 5}"
                            placeholder="请输入内容"
                            maxlength="40"
                            show-word-limit
                            v-model="Company.culture">
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="10">
                  <el-form-item label="公司图片" >
                    <el-upload
                            class="avatar-uploader"
                            :action="this.$config.url+'/company/companyImage'"
                            :show-file-list="false"
                            :on-success="handleAvatarSuccess"
                            :before-upload="beforeAvatarUpload"
                    >
                      <img v-if="Company.companyImg" :src="this.$config.url+this.Company.companyImg" class="avatar" style="height: 190px;width: 190px">
                      <div v-else><img src="./img/noImg.gif"
                                       style="height: 190px;width: 190px"></div>
                    </el-upload>

                  </el-form-item>
                </el-col>
              </el-row>
              <el-form-item label="公司介绍" prop="resource">
                <el-input
                        type="textarea"
                        :autosize="{ minRows: 3, maxRows: 5}"
                        placeholder="请输入内容"
                        maxlength="300"
                        show-word-limit
                        v-model="Company.introduce">
                </el-input>
              </el-form-item>

            </table>
          </el-form>
          <el-button v-if="isInsert" type="success" @click="changeImportCompany" style="margin-left: 400px">导入公司</el-button>
          <el-button v-if="isInsert" type="success" @click="insertCompany" style="margin-left: 400px">新增公司</el-button>
          <el-button v-else type="success" @click="saveCompany" style="margin-left: 400px">保存</el-button>

        </dd>
      </dl>
    </div>
    <el-dialog :visible.sync="importCompany" style="">
      <el-form >
        <el-form-item label="搜索系统内公司：" style="margin-left: 150px">
        <el-autocomplete   v-model="test" style="width: 300px"
                         :fetch-suggestions="querySearchAsync" @select="handleSelect"
                         placeholder="请输入公司名词">
        </el-autocomplete>
        </el-form-item>
      </el-form>
      <div class="educationalShow" v-if="companyDetail.companyName">
        <ul class="elist clearfix">
          <li class="clear">
            <h1>{{companyDetail.companyName}}</h1>
            <span class="c9">{{companyDetail.chairman}}</span>
            <div>
              <h3>{{companyDetail.address}}</h3>
              <h4>企业文化：{{companyDetail.introduce}}</h4>
              <h4>企业文化：{{companyDetail.culture}}</h4>
            </div>
          </li>
        </ul>

        <el-button type="success" @click="bindCompany()">确定</el-button>
      </div><!--end .educationalShow-->
    </el-dialog>
  </div>
</template>

<script>
  import jobClassify from '../jobclassify/Jobclassify'
  import ElFormItem from "element-ui/packages/form/src/form-item";

  export default {
    components: {ElFormItem,jobClassify},
    name: "my-company",
    data() {
      return {
        importCompany:false,
        loading: false,
        hrId: '',
        isInsert:true,
        Company: {
          companyId:'',
          companyName: '',
          chairman: '',
          address: '',
          zctime: '',
          size: '',
          business: '',
          introduce: '',
          culture:'',
          companyImg: ''
        },

        test:'',
        companyDetail:{},
      }
    },
    created() {
      this.hrId = this.$store.state.hr.hrId;
      this.getMyCompany();
    },
    methods: {
      //根据hrId查询公司
      getMyCompany() {
        this.loading = true
        this.$ajax.post(this.$config.url + `/company/selCompanyByhrID/${this.hrId}`)
            .then(res => {
              if (res.data.message === "succ") {
                this.Company = res.data.object;
                this.isInsert=false;
              } else if (res.data.message === "null") {
                this.$message.warning("当前您无隶属公司，请绑定或新增！")
              } else {
                this.$message.error("出错了：" + res.data.message)
              }
              this.loading = false;
            }).finally(() => {
        })
      },
      getJobClick(getJobClick) {
        this.Company.business = getJobClick;
      },
      handleAvatarSuccess(res) {
        this.Company.companyImg =res;
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isPNG = file.type === 'image/png';
        const isGIF = file.type === 'image/gif';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG && !isPNG && !isGIF) {
          this.$message.error('上传头像图片只能是 JPG 或PNG或gif格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
      },
      //增加公司
      insertCompany(){
        this.$ajax.post(this.$config.url + `/company/addCompany/${this.hrId}`,this.Company)
            .then(res => {
              if (res.data === true) {
                this.$message.success("添加成功");
                this.isInsert=false;
                this.getMyCompany();
              } else {
                this.$message.error("添加失败" )
              }
            }).finally(() => {
        })
      },
      //保存公司
      saveCompany(){
        this.$ajax.post(this.$config.url + `/company/updateCompany`,this.Company)
            .then(res => {
              if (res.data === true) {
                this.getMyCompany();
                this.$message.success("保存成功");
              } else {
                this.$message.error("保存失败" )
              }
            }).finally(() => {
        })
      },
      //查询公司弹窗
      changeImportCompany(){
        this.importCompany=!this.importCompany
      },
      querySearchAsync(queryString, cb) {
        clearTimeout(this.timeout);
        var results = []
        if (queryString == '') {
          cb(results);
        } else {
          //掉接口需要的参数

          //这里去掉后端的接口.根据自己接口的情况进行赋值
          this.$ajax.post(this.$config.url + `company/selCompanyList/1`, {
            "companyName":queryString
          }).then(
              res => {
                  var result = res.data.list;
                  //循环放到一个远程搜索需要的数组
                  for (let i = 0; i < result.length; i++) {
                    const element = result[i];
                    results.push({
                      value: element.companyName,
                      id: element.companyId
                    })
                  }
                  cb(results)
              }
          );
        }
      },
      //点击出现搜索后点击的每一项
      handleSelect(item) {

        this.$ajax.post(this.$config.url + `company/selCompanyById/${item.id}`,
        ).then(res => {
          if(res.data.message==="succ"){
            this.companyDetail=res.data.object;
          }else{
            this.$message.warning("出错了，查询该企业失败")
          }
        }
        );

      },
      bindCompany(){
        this.$ajax.post(this.$config.url + `/company/addCompany/${this.hrId}`,this.companyDetail)
            .then(res => {
              if (res.data === true) {
                this.$message.success("添加成功");
                this.getMyCompany()
              } else {
                this.$message.error("添加失败" )
              }
            }).finally(() => {
        })
      },
      //预览/去公司详情页
      goCompanyDetail(){

        this.$router.push({
          path:'/CompanyDetail',
          query:{companyId:this.Company.companyId}
        })
      }
    },

  }
</script>

<style scoped>
  .company_center_content {
    background-color: #fafafa;
    margin-top: 5px;
    position: relative
  }

  .company_center_content > dt {
    height: 47px;
    position: absolute;
    z-index: 1;
    top: -5px;
    left: 40px;
    background-color: #91cebe
  }

  .company_center_content > dt h1 {
    color: #fff;
    font-size: 24px;
    font-weight: normal;
    line-height: 47px;
    padding: 0 20px;
    margin: 0
  }

  .company_center_content > dt em {
    background: url(img/title_arrow_new.png) no-repeat;
    width: 4px;
    height: 5px;
    position: absolute;
    left: -4px;
    top: 0
  }

  span {
    font-size: 20px
  }

  .company_center_content > dd {
    min-height: 337px;
    padding: 70px 0;
    position: relative
  }

  .company_center_content > dd .ccc_tr {
    position: absolute;
    right: 20px;
    top: 20px
  }

  .company_center_content > dd .ccc_tr span {
    color: #019875;
    font-weight: 600
  }

  .company_center_content .pt35 {
    padding-top: 70px !important
  }

  .company_center_content .no_resume_tip span {
    font-size: 14px;
    color: #999
  }

  .company_center_content .no_resume_tip a {
    color: #019875;
    text-decoration: underline
  }

  .btm {
    border-bottom: 1px solid #e0e0e0
  }

  .btn_32 {
    padding: 0 55px;
    font-size: 18px;
    color: #fff;
    border: none;
    height: 32px;
    line-height: 32px;
    background: #91cebe;
    float: left;
    margin-left: 250px;
    overflow: hidden;
    transition: background 0.2s ease-in 0s;
  }

  .btn_32:hover {
    color: #fff;
    background: #019875;
  }
</style>